<template>
<div v-highlight>
    <el-row type="flex" justify="start">
        <!--        头像插件-->
        <div style="margin-top: 10px">
            <avatar :username="User.username" :src="DefaultHeadImg"></avatar>
        </div>

        <!--        这里是回复人的基本信息-->
        <div style="margin-left: 20px; font-size: 12px;">
            <p>用户名:{{User.username}}</p>
            <p>邮箱号:{{User.email}}</p>
        </div>

        <!--关注问题-->
        <div class="fork-btn" v-if="User.username!=user.uname">
            <el-button type="warning" icon="el-icon-star-off" size="mini" @click="addfriend">加为好友</el-button>
        </div>
    </el-row>
    <hr />
    <!--        这里放回复的内容-->
    <p>回复的内容</p>
    <article v-html="comment.commentFomat" class="highlight"></article>

    <el-row type="flex" justify="space-between">
        <el-col :span="9">
            <!--        这里搞一个，赞，踩，按钮-->
            <div>
                <el-button type="primary" icon="el-icon-caret-top" @click="like">点赞{{comment.likenum}}次</el-button>
                <el-button type="primary" icon="el-icon-caret-bottom" @click="dislike"></el-button>
            </div>
        </el-col>
        <el-col :span="9">
            <!--用户对自己的评论内容作出修改-->
            <div class="com_fun_btn">
                <el-button @click="updateRequest" type="primary" icon="el-icon-edit" size="mini" :disabled="this.User.id!=this.user.uid">更新问题</el-button>
                <el-button @click="deleteComment" type="danger" icon="el-icon-delete" size="mini" :disabled="User.id!=user.uid">删除回复</el-button>
            </div>
        </el-col>
    </el-row>
    <el-dialog title="修改评论的信息" :visible.sync="alterDialogVisable" height="500px" show-close="true" fullscreen="true" v-loading.fullscreen.lock="loading">
        <quill-editor v-model="comment.commentFomat" style="height: 340px;"></quill-editor>
        <span slot="footer" class="dialog-footer" style="margin-top:10px">
            <el-button @click="handlerUpdate" size="mini">确定</el-button>
            <el-button type="primary" @click="alterDialogVisable = false" size="mini">取消</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
//引入富文本编辑器
import {
    quillEditor
} from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import {
    getUserByID
} from "../../api";
import {
    like
} from "../../api";
import {
    dislike
} from "../../api";
import {
    addfriend
} from "../../api";
import {
    updateCommet
} from '../../api'

import Avatar from "vue-avatar";
import storage from "../../model/storage";
export default {
    name: "commentCell",
    props: {
        comment: ""
    },
    methods: {
        like() {
            if (this.user.uname == null || this.user.uname == "") {
                this.$message.error("请先登录");
            } else {
                this.comment.likenum++;
                console.log("点击了点赞");
                this.likeInfo.uid = this.User.id;
                this.likeInfo.cid = this.comment.id;
                console.log(this.likeInfo);
                like(this.likeInfo).then(res => {
                    console.log(res);
                    this.$messege.success("点赞成功");
                });
            }
        },
        dislike() {
            if (this.user.uname == null || this.user.uname == "") {
                this.$message.error("请先登录");
            } else {
                this.comment.likenum--;
                console.log("点击了踩");
                this.likeInfo.uid = this.User.id;
                this.likeInfo.cid = this.comment.id;
                dislike(this.likeInfo).then(res => {
                    console.log(res);
                    if (res.data.code == 200) {
                        this.$messege.success("点踩成功");
                    }
                });
            }
        },
        addfriend() {
            if (this.user.uname == null || this.user.uname == "") {
                this.$message.error("请先登录");
            } else {
                let friend = {
                    //用户ID
                    userId: this.user.uid,
                    //好友ID
                    friendId: this.comment.uid
                };
                addfriend(friend).then(result => {
                    console.log(result);
                    if (result.data.code == 501) {
                        this.$message.error("你们已经是好友了！");
                    }
                    if (result.data.code == 200) {
                        this.$message.success("添加成功!");
                    }
                });
            }
        },
        updateRequest() {
            this.alterDialogVisable = true;
        },
        deleteComment() {
            alert("别搞呕，评论和很多张表都关联的");
        },
        handlerUpdate() {
            this.loading = true;
            console.log("点击了确定更新对话框")
            updateCommet(this.comment).then(result => {
                console.log(result.data)
                this.loading = false;
                this.alterDialogVisable = false;
                this.$message.success("更新完成")
            })

        }
    },
    components: {
        Avatar,
        quillEditor
    },
    data() {
        return {
            DefaultHeadImg:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602686017620&di=2ed665aa84c31dd98072c393bf7dae00&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F10%2F1723503522729.jpg',
            loading: false,
            //发评论的用户信息
            User: "",
            alterDialogVisable: false,
            //当前用户的信息
            user: {
                uid: "",
                uname: ""
            },
            likeInfo: {
                uid: "",
                cid: ""
            }
        };
    },
    mounted() {
        //从哪store中取出用户的信息
        this.user.uname = storage.get("username");
        this.user.uid = storage.get("uid");
        console.log("当前用户为：" + this.user.uname);
        console.log("当前用户ID为：" + this.user.uid);

        console.log("评论的用户ID" + Number.parseInt(this.comment.uid));
        //初始化回复人的信息（头像，昵称等）
        getUserByID(this.comment.uid)
            .then(res => {
                console.log(res);
                this.User = res.data.user;
                console.log(this.User.id != this.user.uid)
            })
            .catch(function (error) {
                console.log(error);
            });
    }
};
</script>

<style scoped>
.com_fun_btn {
    margin-top: 5px;
}

.fork-btn {
    margin-left: 20px;
    margin-top: 34px;
}
</style>
